<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户中心3.0</title>
    <!-- <meta name="description" content=""> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/userCenter.css">
    <style>
        .imgMess.imgEmall:hover {
            outline: 8px ridge rgba(133, 238, 212, 0.746);
            border-radius: rem;
        }
    </style>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <!--导航栏-->
    <div class="navbar">
        <div class="barlogo">
            <img src="images/firstpage_logo.png" />
        </div>
        <div class="barlist">
            <div class="barleft hoverbar"><span>问卷列表</span></div>
            <div class="barleft hoverbar"><span>模板列表</span></div>
            <div class="barleft hoverbar firstbar"><span>用户中心</span></div>
        </div>
        <div class="hoverbar" id="exit"><span>安全退出</span></div>
    </div>

    <!--主题内容-->
    <div class="content">
        <!-- carte 功能菜单：个人信息 成员管理 权限管理 班级管理 -->
        <div class="carte">
            <table border="0" cellspacing="71">
                <tr>
                    <td onclick="dj(this);" class="td1 flag end">个人信息</td>
                    <td onclick="dj(this);" class="td2 flag">成员管理</td>
                    <td onclick="dj(this);" class="td3 flag">权限管理</td>
                    <td onclick="dj(this);" class="td4 flag">班级管理</td>
                </tr>
            </table>
        </div>
        <!--个人信息 表单 form -->
        <div style="height: 800px;">
            <div class="form ">
                <form action="" class="mysel">
                    <input type="text" class="user" name="user" placeholder="用户名"><br>
                    <input type="password" class="pd" name="pd" id="" placeholder="密码"><br>
                    <input type="password" class="pwd" name="pwd" id="" placeholder="再次确认密码"><br>
                    <input type="image" class="imgMess" src="images/user_btn_message.png" name="mess"
                        style="margin-right: 100px;">
                    <input type="image" class="imgEmall" src="images/user_btn_email.png" name="email"><br>
                </form>
            </div>

            <!-- 成员管理 auth -->
            <div class="auth dis">
                <form action="#" method="post" class="content_body_from">
                    <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                    </div>
                    <input type="search" id="search" />
                    <input class="souso" type="button" id="button" value="搜   索">
                    <input class="tianj1" type="button" id="button" name="tj1" value="添   加">
                    <!-- <input type="button" id="button" name="qr" value="确   认"> -->
                </form>
                <!-- -------可加表格--------- -->
                <div id="trtdBer">
                    <table border="0">
                        <tr>
                            <td>&nbspID&nbsp</td>
                            <td>登录名</td>
                            <td>角色名</td>
                            <td>手机号</td>
                            <td>邮箱</td>
                            <td>操作</td>
                        </tr>
                        <tr class="cn">
                            <td colspan="6">
                                <h3>成员管理</h3>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <!-- 权限管理 member -->
            <div class="mber dis">
                <form action="#" method="post" class="content_body_from">
                    <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                    </div>
                    <input type="search" id="search" />
                    <input class="souso" type="button" id="button" value="搜   索">
                    <input class="tianj2" type="button" id="button" name="tj2" value="添   加">
                    <!-- <input type="button" id="button" name="qr" value="确   认"> -->
                </form>
                <!-- -------可加表格--------- -->
                <div id="trtd">
                    <table border="0">
                        <tr>
                            <td>&nbspID&nbsp</td>
                            <td>用户名字</td>
                            <td>具体描述</td>
                            <td>用户操作</td>
                        </tr>
                        <tr class="bn">
                            <td colspan="5">
                                <h3>权限管理</h3>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- 班级管理 class -->
            <div class="clas dis">
                <form action="#" method="post" class="content_body_from">
                    <div><img src="./images/firstpage_icon_search.png" style="position: absolute; left: 15px; top:11px">
                    </div>
                    <input type="search" id="search" />
                    <input class="souso" type="button" id="button" value="搜   索">
                    <input class="tianj3" type="button" id="button" name="tj" value="添   加">
                    <!-- <input type="button" id="button" name="qr" value="确   认"> -->
                </form>
                <!-- -------可加表格--------- -->
                <div id="trtd">
                    <table border="0">
                        <tr>
                            <td>&nbspID&nbsp</td>
                            <td>班级名字</td>
                            <td>班级人数</td>
                            <!-- <td>商品总价</td> -->
                            <td>用户操作</td>
                        </tr>
                        <tr class="an">
                            <td colspan="5">
                                <h3>班级管理</h3>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="jj dis" style="margin-left: 200px;">
            <ul class="pagination">
                <li><a href="#">«</a></li>
                <li><a class="active" href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">»</a></li>
            </ul>
        </div>
    </div>


    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
    <script src="./layer/layer.js"></script>
    <script>
        $(function () {
            //加载事件
            var collection = $(".flag");
            $.each(collection, function () {
                $(this).addClass("start");
            });
        });
        //单击事件
        function dj(dom) {
            var collection = $(".flag");
            $.each(collection, function () {
                $(this).removeClass("end");
                $(this).addClass("start");
            });
            $(dom).removeClass("start");
            $(dom).addClass("end");
        }

        $(function () {
            $(".td1").click(function () {
                if ($(".jj").css('display') == 'block') {
                    $(".jj").css("display", "none");
                } else {
                    $(".jj").css("display", "none");
                }
                
                $(".form").show(); $(".auth").hide(); $(".mber").hide(); $(".clas").hide();

            })
            

            $(".td2").click(function () {
                // alert(1)
                if ($(".jj").css('display') == 'none') {
                    $(".jj").css("display", "block");
                } else {
                    $(".jj").css("display", "block");
                }
                
                $(".auth").show(); $(".form").hide(); $(".mber").hide(); $(".clas").hide();
            })
            

            $(".td3").click(function () {
                if ($(".jj").css('display') == 'block') {
                    $(".jj").css("display", "none");
                }
                $(this).addClass("td-Color1");
                $(this).removeClass("td-Color2");
                $(".mber").show(); $(".form").hide(); $(".auth").hide(); $(".clas").hide();

            })
            

            $(".td4").click(function () {
                if ($(".jj").css('display') == 'block') {
                    $(".jj").css("display", "block");
                } else {
                    $(".jj").css("display", "block");
                }
                
                $(".clas").show(); $(".form").hide(); $(".auth").hide(); $(".mber").hide();

            })
            
        })
        /* --------- */
        $(function (e) {
            // -------添加------
            var a = 0;

            // $("input[name='tj1']").click(function () {
            //     var html = "<tr class='tr' name='tr" + a + "'> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='text' name='name" + a + "'></td> <td><input type='text' name='name" + a + "'></td>  <td><input type='text' name='name" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
            //     $("tr[class='cn']").before(html);
            //     a++;
            // })
            // $("input[name='tj2']").click(function () {
            //     var html = "<tr class='tr' name='tr" + a + "'> <td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='text' name='name" + a + "'></td> <td><input type='text' name='name" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
            //     $("tr[class='bn']").before(html);
            //     a++;
            // })
            // $("input[name='tj']").click(function () {

            //     var html = "<tr class='tr' name='tr" + a + "'><td><input type='text' name='name" + a + "'> </td><td><input type='nubmer' name='pirce" + a + "'></td> <td><input type='nubmer' name='num" + a + "'></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td></tr>";
            //     $("tr[class='an']").before(html);
            //     a++;
            // })

            // -------确认--------
            var b = 0;
            $("input[name='qr']").click(function () {
                $(".tr").each(function (i) {
                    var bindex = $(".tr:eq(" + i + ")").attr("name");
                    var index = (bindex.split("tr"));

                    var name = $("input[name='name" + index[1] + "']").val();
                    var price = $("input[name='pirce" + index[1] + "']").val();
                    var num = $("input[name='num" + index[1] + "']").val();

                    price = parseInt(price);
                    num = parseInt(num);
                    var su = price * num;
                    if (price != NaN || num != NaN) {
                        if (!isNaN(price) && !isNaN(num)) {
                            var xg = "<td><input type='hidden' name='name" + index[1] + "' value='" + name + "'><sapn>" + name + "</span></td> <td><input type='hidden' name='pirce" + index[1] + "' value='" + price + "'/><sapn>" + price + "</span></td> <td><input type='hidden' name='num" + index[1] + "' value='" + num + "'/><sapn>" + num + "</span></td> <td><sapn>" + su + "</span></td>  <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td>";
                            $(".tr:eq(" + i + ")").html(xg);
                        } else {
                            alert("请输入正确的数据")
                        }
                    }
                })
                // ----------删除---------
                $("input[name='sc']").click(function (e) {
                    $(this).parent().parent().remove();
                });
                // --------编辑-----------
                $("input[name='bj']").click(function (e) {
                    var a = $(this).parent().parent().index() - 1;
                    var bindex = $(".tr:eq(" + a + ")").attr("name");
                    var index = (bindex.split("tr"));
                    // alert(index[1])
                    var name = $("input[name='name" + index[1] + "']").val();
                    var price = $("input[name='pirce" + index[1] + "']").val();
                    var num = $("input[name='num" + index[1] + "']").val();
                    var bj = "<td><input type='text' name='name" + index[1] + "'' value='" + name + "'> </td><td><input type='nubmer' name='pirce" + index[1] + "' value='" + price + "'></td> <td><input type='nubmer' name='num" + index[1] + "' value='" + num + "'></td> <td><input type='text' readonly name='sum" + index[1] + "'></td>   <td><input type='button' name='sc' value='删除'><input type='button' name='bj' value='编辑'></td>"
                    $(".tr:eq(" + a + ")").html(bj);
                })
            })
        })
        /* ------提交------- */
        $(function () {
            $("input[class^='tian']").click(function () {
                // alert(1);

                if ($(this).attr("class") == "tianj1") {
                    var content = "<form action='#'><label>id</label><input type='number' placeholder='请输入id' ><br/> <label>登录名</label><input type='text' placeholder='请输入登录名' ><br/> <label>角色名</label><input type='text' placeholder='请输入角色名' ><br/> <label>手机号</label><input type='text' placeholder='请输入手机号' ><br/> <label>邮箱</label><input type='text' placeholder='请输入邮箱' ><br/></form>";
                }
                if ($(this).attr("class") == "tianj2") {
                    var content = "<form action='#'><label>id</label><input type='number' placeholder='请输入id' ><br/><label>用户名字</label><input type='text' placeholder='请输入用户名字' ><br/><label>具体描述</label><input type='text' placeholder='请输入具体描述' ><br/></form>";
                }
                if ($(this).attr("class") == "tianj3") {
                    var content = "<form action='#'><label>id</label><input type='number' placeholder='请输入id' ><br/><label>班级名称</label><input type='text' placeholder='请输入班级名称' ><br/><label>班级人数</label><input type='number' placeholder='请输入班级人数' ><br/></form>";
                }

                // $(this).attr("class")
                // alert($(this).attr("class"));
                // alert($(this).attr("class")=="tianj1");
                // alert(content);
                var btn1;
                var btn2;
                var index = layer.open({
                    offset: ['230px', '686px'],
                    shade: [0.5, '#ffffff'],
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    shadeClose: true,
                    skin: 'yourclass',
                    content
                    // content: "<form action='#'><label>id</label><input type='number' placeholder='请输入id' ><br/><label>班级名称</label><input type='text' placeholder='请输入班级名称' ><br/><label>班级人数</label><input type='number' placeholder='请输入班级人数' ><br/></form>"
                    , btn: ['提交', '转发分享']
                    , yes: function (index) {
                        layer.msg('提交成功', { icon: 1 });
                        layer.close(index);
                    }
                    , btn2: function () {
                        layer.msg('分享成功', { icon: 1 });
                    }
                });
                layer.style(index, {
                    padding: '82px 79px 65px 79px ',
                    background: '#fff',
                })
            })
        })
    </script>
</body>

</html>